<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="search">
        <el-form>
          <el-form-item>
            <search-form size="large" label-width="80px" :search-data="searchData" :search-form="searchForm" :search-handle="searchHandle" :is-handle="true" />
          </el-form-item>
          <el-form-item >
            <el-button v-for="butten in buttens" :key="butten" type="primary" :icon="butten=='Add'?'el-icon-edit':butten=='Update'?'el-icon-edit':butten=='Delete'?'el-icon-delete':butten=='Export'?'el-icon-download':butten" :loading="butten=='Export'?downloadLoading:false" @click="butten=='Add'?OpenDialog(false):butten=='Update'?OpenDialog(true,rows):butten=='Delete'?Delete(rows):butten=='Export'?Export():null">
              {{butten=='Add'?'新增':butten=='Update'?'更新':butten=='Delete'?'删除':butten=='Export'?'导出':butten}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table" >
      <!--引入表格组件        -->
      <table-vue v-loading="loadingTable" :columns="columns" :data="dataList" :table-set="tableSet" @current-change="Choose" @selection-change="SelectionChange" empty-text="暂无数据">
        <!-- #是v-slot的简写，{scope: {row, $index}}是属性对象slot双重解构，注意这里的scope要与子组件插槽绑定的属性名对应 -->
        <!-- 操作列 -->
        <template #handle="{scope: {row, $index}}">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="OpenDialog(true,row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="Delete(row, $index)">删除</el-button>
        </template>
      </table-vue>
    </div>
     <pagination v-show="total>0" :total="total" :page.sync="searchData.pageIndex" :limit.sync="searchData.pageSize" @pagination="handleQuery" />
    <div>
      <el-dialog :title="dialogSet.isEdit?'编辑'+dialogSet.title:'新增'+dialogSet.title" :visible.sync="dialogSet.dialogVisible" :edit.sync="dialogSet.isEdit" width="700px">
        <new-dialog ref="newDialog" v-if="dialogSet.dialogVisible" :visible.sync="dialogSet.dialogVisible" :edit.sync="dialogSet.isEdit" :dialog-form-data="dialogFormData" :dialog-form="dialogForm" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import SearchForm from "@/components/common/Search";
import TableVue from "@/components/common/TableView";
import newDialog from "@/components/common/newDialog";
import Pagination from '@/components/common/Pagination' ;
import request from "@/utils/request";

var dialogFormDatatemp = {}; //中间变量
export default {
  components: {
    SearchForm,
    TableVue,
    newDialog,
    Pagination,
  },
  data() {
    return {
      //页面组件配置
      //===================================================//
      //搜索框按钮
      searchHandle: [
        {
          label: "查询",
          type: "primary",
          handle: this.handleQuery,
          icon: "el-icon-search",
        },
        {
          label: "重置",
          type: "primary",
          handle: this.Reset,
          icon: "el-icon-refresh",
        },
      ],
      //搜索框配置及数据
      searchForm: [
        {
          type: "Input",
          label: "姓名",
          prop: "u_name",
          width: "200px",
          placeholder: "请输入姓名...",
          enternative: this.handleQuery, //按下enter执行的函数
        },
        {
          type: "Input",
          label: "手机号",
          prop: "u_phone",
          width: "200px",
          placeholder: "请输入手机号码...",
        },
        {
          type: "Select",
          label: "状态",
          prop: "u_state",
          width: "200px",
          options: [
            { value: -1, label: "删除" },
            { value: 0, label: "禁用" },
            { value: 1, label: "启用" },
          ],
          change: function (value) {
            // console.log(value);
          },
        },
        {
          type: "year",
          label: "年份",
          prop: "aa",
          width: "200px",
          placeholder: "请输入手机号码...",
          change: function (value) {
            // console.log(value);
          },
        },
      ],
      loadingTable: false,
      dataList: [
        {
          id: 1,
          u_name: "垒起",
          u_phone: "15228352079",
          u_state: "启用",
        },
        {
          u_name: "梅利",
          u_phone: "133625275",
          u_state: "启用",
        },
      ],
      //表格相关配置
      tableSet: {
        selection: true, //是否显示多选框
        showKey: true, //显示索引列
        idColum: "id", //（id）主键列名称
      },
      //表格表头数据
      //Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
      columns: Object.freeze([
        {
          //排序 若做了分页sortable:"custom"
          sortable: true,
          attrs: {
            prop: "u_name",
            label: "姓名",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        {
          sortable: true,
          attrs: {
            prop: "u_phone",
            label: "手机",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        {
          hidden: false,
          attrs: {
            prop: "u_state",
            label: "禁用",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        // {
        //   slot: "handle",
        //   attrs: {
        //     label: "操作",
        //     //不设置width 则自适应
        //     // width: "140",
        //     "class-name": "small-padding fixed-width",
        //     align: "center",
        //   },
        // },
      ]),
      //新增编辑弹出框相关配置
      dialogSet: {
        title: "用户信息",
        isEdit: false,
        dialogVisible: false,
      },
      //新增编辑相关信息
      dialogFormData: { u_name: "", u_phone: "", u_state: "" },
      dialogForm: {
        labelWidth: "100px",
        inline: false,
        labelPosition: "right",
        size: "small",
        formItem: [
          {
            type: "text",
            label: "姓名",
            width: "200px",
            prop: "u_name",
            size: "small",
            isDisabled: false,
            required: true,
            rules: [
              { required: true, message: "请输入活动名称", trigger: "blur" },
              {
                min: 2,
                max: 15,
                message: "长度在 2 到 15 个字符",
                trigger: "blur",
              },
            ],
          },
          {
            type: "text",
            label: "手机号",
            width: "200px",
            prop: "u_phone",
            size: "small",
            isDisabled: false,
            required: true,
          },
          {
            type: "select",
            label: "用户状态",
            width: "200px",
            prop: "u_state",
            size: "small",
            isDisabled: false,
            multiple: false,
            tip: "",
            value: "",
            options: [
              { value: -1, label: "删除" },
              { value: 0, label: "禁用" },
              { value: 1, label: "启用" },
            ],
            required: true,
          },
        ],
      },
      buttens: undefined,
      downloadLoading: false,
      u_states: [],
      searchData: {
        pageIndex: 1,
        pageSize: 10,
        orderColumn: "", //排序字段
        orderSort: "", //排序顺序
        u_name: "",
        u_phone: "",
        u_state: undefined,
      },
        total: 0,//查询返回的总条
      //页面逻辑参数等
      //=======================================================//
      //选中的行
      rows: [],
      requestController: "user/",
    };
  },
  mounted: function () {
    dialogFormDatatemp = this.dialogFormData;
    this.load();
  },
  methods: {
    load() {
      //获取按钮权限(展示哪些按钮)
      this.buttens = this.$store.getters.buttens;
    },
    handleQuery(props, order) {
      this.searchData.orderColumn = props;
      this.searchData.orderSort = order;
      console.log(this.searchData);
    },
    OpenDialog(update, rows) {
      if (update == true) {
        if (rows == undefined || rows.length <= 0) {
          this.$msgbox.alert("请选则需要更新的行", { center: true });
          return;
        }
        this.dialogFormData = rows[0];
        this.dialogSet.isEdit = true;
        //  this.dialogSet.title="更新";
        this.dialogFormData = rows[0];
      } else {
        //清空this.dialogFormData的值
        this.dialogFormData = dialogFormDatatemp;
        this.dialogSet.isEdit = false;
      }
      this.dialogSet.dialogVisible = true;
    },

    //切换选中行触发
    Choose(row) {
      // this.row=row
      // console.log(row);
    },
    //勾选行事件
    SelectionChange(rows) {
      console.log(rows);
      this.rows = rows;
    },
    add() {
      //获取子组件的子组件
      // console.log(this.$refs['newDialog'].$refs['form'].$refs['ruleForm'])

      this.$refs["newDialog"].$refs["form"].$refs["ruleForm"].validate(
        (valid) => {
          if (valid) {
            request({
              url: this.requestController + "Add",
              method: "post",
              data: this.dialogFormData,
            });
          } else {
             this.$msgbox.alert("提交失败");
            return false;
          }
        }
      );
    },
    update() {
      request({
        url: this.requestController + "Update",
        method: "post",
        data: this.dialogFormData,
      });
    },
    delete(rows) {
      if (rows == undefined || rows.length <= 0) {
        this.$msgbox.alert("请选则需要删除的行");
        return;
      }
      var idList = [];
      rows.forEach((item) => {
        item["id"];
      });
    },
    Export() {
      this.downloadLoading = true;
      // this.downloadLoading=false;
    },
    Reset() {
      this.searchData = {};
    },
  },
};
</script>
<style lang="scss">
.el-form-item {
  margin-bottom: 0px;
}
</style>
